<template>
  <div :class="cssLink ? 'h5' : 'web'">
    <div class="hello-page">
      <div class="top-box">
        <img class="top-log" src="../../../assets/wzz_image/wzzlog.png" />
        <div class="top-title">生产一部云龙路可视化数据看板</div>
        <div class="top-time">{{ currentTime }}</div>
      </div>
      <div class="search-content">
        <div class="search-box">
          <div class="search-list">
            <el-date-picker v-model="searchData.startDate" format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss" type="datetime" range-separator="至" placeholder="选择开始日期"
              style="width: 1.8rem" />
          </div>
          <div class="search-list">
            <el-date-picker v-model="searchData.endDate" format="YYYY-MM-DD hh:mm:ss" value-format="YYYY-MM-DD hh:mm:ss"
              type="datetime" range-separator="至" placeholder="选择结束日期" style="width: 1.8rem" />
          </div>
          <div class="search-list">
            <el-select v-model="searchData.craftId" placeholder="请选择工艺" style="width: 1.2rem">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in procedureList" :key="index" />
            </el-select>
          </div>
          <div class="search-list">
            <el-select v-model="searchData.materialId" placeholder="请选择品相" style="width: 1.2rem">
              <el-option v-for="(item, index) in appearanceData" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="search-list">
            <el-select v-model="searchData.unit" placeholder="请选择罐/斤/片" style="width: 1.2rem">
              <el-option label="罐" value="A" />
              <el-option label="斤" value="B" />
              <el-option label="片" value="C" />
            </el-select>
          </div>
          <div class="search-list">
            <el-input v-model="searchData.planBillNo" style="width: 1.2rem" placeholder="请输入罐号查询" />
          </div>
          <div class="query-btn" @click="getInitData()">查询</div>
        </div>
        <div class="echart-total-box">
          <div class="echart-total">
            每日投入数（泡籽）
            <div class="echart-num">
              <div>{{ investment }}</div>
              <span>罐</span>
            </div>
          </div>
          <div class="echart-total">
            每日出库数（晾籽）
            <div class="echart-num">
              <div>{{ totalAmount.total }}</div>
              <span>罐</span>
            </div>
          </div>
          <div class="echart-total">
            在制品数
            <div class="echart-num">
              <div>{{ totalAmount.workTotal }}</div>
              <span>罐</span>
            </div>
          </div>
        </div>
      </div>
      <div class="echart-contnt">
        <div class="echart-list">
          <div class="echart-box" style="height: 38.5vh">
            <progressBar text="每日计划产量达成实时情况" :planData="planData"></progressBar>
          </div>
          <div class="echart-box" style="height: 40vh">
            <echartsPie :echartsPieData="echartsPieData" text="设备实时运行状态（台）">
            </echartsPie>
          </div>
        </div>
        <div class="echart-list">
          <div class="echart-box">
            <div class="echart-box-total">
              <div class="state-box">
                <div v-for="(item, index) in echartTotal" :key="index" class="state-list">
                  <div class="state-name">
                    {{ item.name.substring(0, item.name.length - 2) }}
                  </div>
                  <span class="state-state" :style="!item.value ? 'background:green' : 'background:red'"></span>
                </div>
              </div>
            </div>

            <div style="height: 30.5vh">
              <progressLoop2 type="power" seriesName1="产量" :company="`工序日产量（${unitForm[searchData.unit]}）`"
                :color1="color3" :color2="color4" :dateData="dailyProduction" :dataList="yieldList"></progressLoop2>
            </div>
          </div>
          <!-- 工艺班组出勤 -->
          <div class="echart-box" style="height: 40vh">
            <div style="height: 100%">
              <stacking type="power" :color1="color3" :color2="color4" :reportDuty="reportDuty" :dateData="dateData"
                :dataList="electricList2"></stacking>
            </div>
          </div>
        </div>

        <div class="echart-list">
          <div class="echart-box" style="height: 38.5vh">
            <div style="height: 100%">
              <machine type="power" company="机器产能利用率" :lineChartForm="lineChartForm"></machine>
            </div>
          </div>
          <div class="echart-box" style="height: 40vh">
            <div style="height: 100%">
              <echartsPie :echartsPieData="echartsPieData2" text="分品相产量及占比(晾籽)">
              </echartsPie>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import progressBar from "../../components/progressBar";
import echartsPie from "../../components/echartsPie";
import progressLoop2 from "../../components/progressLoop2";
import foldLine from "../../components/foldLine";
import stacking from "../../components/stacking";
import machine from "../../components/machine";
import {
  capacityUtilizationRate,
  yieldReachRate,
  deviceRunningState,
  materialRate,
  dayOutputGroupByCraft,
  countYieldByCraft,
  workingMaterialWeight,
  gainCrafts,
  actualArrivedByTeam,
  getMaterialByGroup,
  queryAbnormalProcess,
  dayInputQty,
} from "@/api/kanban.js";
let time = ref(null);
// 每日计划产量达成实时情况
let searchData = ref({ unit: "A" });
let unitForm = ref({ A: "罐", B: "斤", C: "片" });
// 设备实时运行状态
let echartsPieData = ref([
  { name: "未运行机台", value: 0, title: "未运行机台" },
  { name: "运行机台", value: 0, title: "运行机台" },
  { name: "待机机台", value: 0, title: "待机机台" },
]);
// 机器运行效率（罐）
let color3 = reactive([
  { offset: 0, color: "rgba(45, 182, 251, 1)" },
  { offset: 1, color: "rgba(12, 61, 114, .8)" },
]);
let color4 = reactive([
  { offset: 0, color: "rgba(244, 82, 75, 1)" },
  { offset: 1, color: "rgba(18, 15, 37, 1)" },
]);
let dateData = reactive([
  "J01灭菌罐",
  "J02灭菌罐",
  "J03灭菌罐",
  "J04灭菌罐",
  "J05灭菌罐",
  "J06灭菌罐",
  "J07灭菌罐",
  "J08灭菌罐",
  "J08灭菌罐",
  "J10灭菌罐",
]);
let electricList2 = reactive([1430, 120, 110, 1430, 110, 1430, 1110]);
// 状态
let echartTotal = ref([
  // {name:"泡籽",state:1},
  // {name:"灭菌",state:2},
  // {name:"发制",state:1},
  // {name:"烤籽",state:1},
  // {name:"晾籽",state:1},
  // {name:"压籽",state:2},
  // {name:"筛籽",state:1},
  // {name:"选籽",state:1},
]);
// 机器产能利用率
let lineChartForm = ref({
  name: [],
  value: [],
});
// 生产一部工序日产量（罐）
let yieldData = reactive([
  "01泡籽上料",
  "01泡籽下料",
  "02灭菌",
  "03发制上料",
  "03发制下料",
  "03烤料",
  "J07灭菌罐",
  "J08灭菌罐",
  "J08灭菌罐",
  "J10灭菌罐",
]);
let yieldList = ref([]);
// 设备实时运行状态
let echartsPieData2 = ref([]);
// 每日计划
let planData = ref({
  showName: [],
  numerical: [],
  total: [],
});
// 日产量
let dailyProduction = ref([]);
// 总量
let totalAmount = ref({
  total: 0,
  workTotal: 0,
});
// 班组出勤
let reportDuty = ref([]);

let investment = ref(0);
const getInitData = () => {
  let params = {
    ...searchData.value,
    // craftId:"1725259018754",
    // materialId:"1725259018725",
    // unitName:"ffHrR",
    // planBillNo:"d8hzv"
  };
  yieldReachRate(params).then((res) => {
    if (res.errorCode == 0) {
      let total = [];
      let name = [];
      let value = [];
      res.data.map((item) => {
        total.push(100);
        name.push(item.name.replace("工艺", ""));
        value.push(item.value);
      });
      planData.value.showName = name;
      planData.value.numerical = value;
      planData.value.total = total;
    }
  });
  // 设备
  deviceRunningState(params).then((res) => {
    if (res.errorCode == 0) {
      echartsPieData.value[2].value = res.data.standbyDeviceQty;
      echartsPieData.value[1].value = res.data.runDeviceQty;
      echartsPieData.value[0].value = res.data.noRunDeviceQty;
    }
  });
  // 品相占比
  materialRate(params).then((res) => {
    if (res.errorCode == 0) {
      echartsPieData2.value = res.data;
    }
  });
  // 日产量
  dayOutputGroupByCraft(params).then((res) => {
    if (res.errorCode == 0) {
      let yieldLists = [];
      let dailyProductions = [];
      res.data.map((item) => {
        yieldLists.push(item.value);
        dailyProductions.push(item.name.replace("工艺", ""));
      });
      yieldList.value = yieldLists;
      dailyProduction.value = dailyProductions;
    }
  });
  // 总产量
  countYieldByCraft(params).then((res) => {
    // console.log("totalAmount=========", res);
    if (res.errorCode == 0) {
      totalAmount.value.total = res.data;
    }
  });
  // 在制品
  workingMaterialWeight(params).then((res) => {
    if (res.errorCode == 0) {
      reportDuty.value.workTotal = res.data;
    }
  });
  dayInputQty(params).then((res) => {
    investment.value = res.data;
  });
  // 工艺班组出勤
  actualArrivedByTeam(params).then((res) => {
    if (res.errorCode == 0) {
      reportDuty.value = res.data;
      console.log(' reportDuty.value', reportDuty.value);
    }
  });
  queryAbnormalProcess(params).then((res) => {
    echartTotal.value = res.data;
  });
  capacityUtilizationRate(params).then((res) => {
    let name = [];
    let value = [];
    res.data.map((item) => {
      name.push(item.name.replace("工艺", ""));
      value.push(item.value);
    });
    lineChartForm.value.name = name;
    lineChartForm.value.value = value;
  });
};

// 工艺
let procedureList = ref([]);
// 品相
let appearanceData = ref([]);
const getOptions = () => {
  // 工艺
  gainCrafts({ workshoNumber: "CJGL-0000001", isFatherCrafts: false }).then(
    (res) => {
      procedureList.value = res.data;
    }
  );
  // 品相
  getMaterialByGroup({ groupNumbers: ["0201"] }).then((res) => {
    appearanceData.value = res.data;
  });
};

const cssLink = ref(false);

onMounted(() => {
  cssLink.value = window.innerWidth < 1300 ? true : false;
  setInterval(() => {
    this.getInitData();
  }, 1000 * 60 * 15);
  getInitData();
  // 工艺品相
  getOptions();
});
</script>
<style scoped lang="scss">
.web {
  .query-btn {
    color: #fff;
    width: 60px;
    text-align: center;
    background-color: #409eff;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .search-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 30px;
    background-color: rgba(14, 42, 67, 0.6);
    margin-bottom: 1vh;

    .search-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .search-list {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }

    .echart-total-box {
      display: flex;

      .echart-total {
        padding-right: 30px;

        .echart-num {
          display: flex;
          align-items: baseline;

          div {
            font-size: 30px;
            color: #db203e;
          }

          text {
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }

  .echart-box-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .state-box {
    display: flex;
    align-items: center;
    justify-content: center;

    .state-list {
      margin-left: 30px;
      text-align: center;

      .state-name {
        font-size: 16px;
        margin-bottom: 5px;
      }

      .state-state {
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: red;
      }
    }
  }

  .echart-total {
    .echart-num {
      display: flex;
      align-items: baseline;

      div {
        font-size: 30px;
        color: #db203e;
      }

      text {
        font-size: 14px;
        color: #fff;
      }
    }
  }
}

.h5 {
  .query-btn {
    color: #fff;
    width: 0.6rem;
    text-align: center;
    background-color: #409eff;
    height: 0.64rem;
    line-height: 0.64rem;
    border-radius: 0.06rem;
    margin-bottom: 0.1rem;
    cursor: pointer;
  }

  .search-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 0.3rem;
    background-color: rgba(14, 42, 67, 0.6);
    margin-bottom: 1vh;

    .search-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .search-list {
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
      }
    }

    .echart-total-box {
      display: flex;

      .echart-total {
        padding-right: 0.3rem;

        .echart-num {
          display: flex;
          align-items: baseline;

          div {
            font-size: 0.3rem;
            color: #db203e;
          }

          text {
            font-size: 0.14rem;
            color: #fff;
          }
        }
      }
    }
  }

  .echart-box-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
  }

  .state-box {
    display: flex;
    align-items: center;
    justify-content: center;

    .state-list {
      margin-left: 0.3rem;
      text-align: center;

      .state-name {
        font-size: 0.16rem;
        margin-bottom: 0.05rem;
      }

      .state-state {
        display: inline-block;
        width: 0.14rem;
        height: 0.14rem;
        border-radius: 50%;
        background-color: red;
      }
    }
  }

  .echart-total {
    .echart-num {
      display: flex;
      align-items: baseline;

      div {
        font-size: 0.3rem;
        color: #db203e;
      }

      text {
        font-size: 0.14rem;
        color: #fff;
      }
    }
  }
}

::v-deep .el-input__inner {
  color: #fff;
}

.echart-contnt {
  display: flex;
  justify-content: space-between;
  padding: 0 1%;

  .echart-list {
    width: 33.3%;

    &:nth-child(1) {
      width: 29%;
    }

    &:nth-child(2) {
      width: 42%;
      margin: 0 1%;
    }

    &:nth-child(3) {
      width: 29%;
    }
  }
}

.echart-box {
  background-color: rgba(14, 42, 67, 0.6);
  margin-bottom: 1vh;
  padding: 1vh;
}

.el-select {
  width: 0.8rem;
}

::v-deep .el-input__wrapper {
  background-color: #0e2a43 !important;
}

// .el-input {
// background-color: #0e2a43 !important;
// }
.select-box {
  width: 100%;
  // height: 10%;
  display: flex;
}

.hello-page {
  color: #fff;
  margin: 0;
  padding: 0;
  background: url("../../../assets/wzz_image/bg.jpg") no-repeat;
  background-size: cover;
  /* 让背景图片等比例拉伸或缩小以填满容器 */
  box-sizing: border-box;
  width: 100%;
  /* 设置宽度为父容器的100% */
  height: 100%;

  /* 设置高度为父容器的100% */
  .top-box {
    width: 100%;
    height: 10vh;
    background: url("../../../assets/wzz_image/head_bg.png") no-repeat;
    background-size: cover;
    /* 让背景图片等比例拉伸或缩小以填满容器 */
    box-sizing: border-box;
    display: flex;
    position: relative;

    .top-log {
      height: 6vh;
    }

    .top-title,
    .top-time {
      position: absolute;
      bottom: 36%;
      /* 64% 的高度中减去64%得到 36%，再向上移动64%的64%，即36% * 0.64 = 3.6% */
    }

    .top-title {
      font-size: 32px;
      color: #399bff;
      font-weight: bold;
      left: 50%;
      /* 根据需要调整位置 */
      transform: translateX(-50%);
    }

    .top-time {
      font-size: 0.2rem;
      right: 0;
      /* 根据需要调整位置 */
      font-family: "MyCustomFont", sans-serif;
      /* 使用自定义字体 */
    }
  }
}
</style>
